<template>
	<view class="person">
		<view class="user">
			<view class="bgImg imgPublic">
				<image src="../static/images/dbbj@2x.png" mode="widthFix"></image>
			</view>
			<view class="userContent">
				<view class="base dFlex jStart_aCenter" v-if="datas.id">
					<view class="tx imgPublic">
						<image :src="datas.avatar" mode="widthFix"></image>
					</view>
					<text>{{datas.nickname}}</text>
				</view>
				<button open-type="getPhoneNumber" hover-class="none" @getphonenumber="wxLogin" class="base dFlex jStart_aCenter" v-else>
					<view class="tx imgPublic">
						<image src="" mode="widthFix"></image>
					</view>
					<text>登录/注册</text>
				</button>
				<view class="config">
					<view class="configImg imgPublic">
						<image src="../static/images/VIPbitp@2x.png" mode="widthFix"></image>
					</view>
					<view class="configContent">
						<view class="vip dFlex jBetween_aCenter">
							<view class="vipDesc dFlex jStart_aCenter">
								<view class="vipIcon imgPublic">
									<image src="../static/images/VIP@2x.png" mode="widthFix"></image>
								</view>
								<text>VIP会员</text>
							</view>
							<!-- <view class="vipTime">尊贵的会员 2024-12-31 23:59:59</view> -->
						</view>
						<view class="tool dFlex jAround_aCenter">
							<view class="toolOne dFlex jCenter_aCenter" @click="goPage('6',1)">
								<view class="toolIcon imgPublic">
									<image src="../static/images/cz@2x.png" mode="widthFix"></image>
								</view>
								<text>充值</text>
							</view>
							<view class="toolOne dFlex jCenter_aCenter" @click="goPage('2',1)">
								<view class="toolIcon imgPublic">
									<image src="../static/images/qb@2x.png" mode="widthFix"></image>
								</view>
								<text>钱包</text>
							</view>
							<view class="toolOne">
								<view class="toolTit">余 额</view>
								<text>￥{{datas.vip_rechage_balance ? datas.vip_rechage_balance : '0.00'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="partTit dFlex jBetween_aCenter">
				<span>我的订单</span>
				<span class="lookMore dFlex jEnd_aCenter" @click='goPage(7,"-1")'>
					查看全部	<u-icon name="arrow-right-double"></u-icon>
				</span>
			</view>
			<view class="partVal dFlex jAround_aCenter">
				<view class="orderOne" @click='goPage(7,0)'>
					<view class="orderIcon imgPublic">
						<image src="../static/images/dfk@2x.png" mode="widthFix"></image>
					</view>
					<text>待付款</text>
				</view>
				<view class="orderOne" @click='goPage(7,10)'>
					<view class="orderIcon imgPublic">
						<image src="../static/images/dfh@2x.png" mode="widthFix"></image>
					</view>
					<text>待发货</text>
				</view> 
				<view class="orderOne" @click='goPage(7,20)'>
					<view class="orderIcon imgPublic">
						<image src="../static/images/dsh@2x.png" mode="widthFix"></image>
					</view>
					<text>待收货</text>
				</view>
				<view class="orderOne" @click='goPage(7,30)'>
					<view class="orderIcon imgPublic">
						<image src="../static/images/dpj@2x.png" mode="widthFix"></image>
					</view>
					<text>待评价</text>
				</view>
				<view class="orderOne" @click='goPage(7,40)'>
					<view class="orderIcon imgPublic">
						<image src="../static/images/tk@2x.png" mode="widthFix"></image>
					</view>
					<text>退款/售后</text>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="partTit">我的服务</view>
			<view class="partList">
				<view class="partLine dFlex jBetween_aCenter" @click="goPage('3',1)">
					<view class="lineContent dFlex jStart_aCenter">
						<view class="lineIcon imgPublic">
							<image src="../static/images/kqzx@2x.png" mode="widthFix"></image>
						</view>
						<text>卡券中心</text>
					</view>
					<u-icon name="arrow-right" class='smallIcon'></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click="goPage('1',1)">
					<view class="lineContent dFlex jStart_aCenter">
						<view class="lineIcon imgPublic">
							<image src="../static/images/wdsc@2x.png" mode="widthFix"></image>
						</view>
						<text>我的收藏</text>
					</view>
					<u-icon name="arrow-right" class='smallIcon'></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click="goPage('5',1)">
					<view class="lineContent dFlex jStart_aCenter">
						<view class="lineIcon imgPublic">
							<image src="../static/images/dzgl@2x.png" mode="widthFix"></image>
						</view>
						<text>地址管理</text>
					</view>
					<u-icon name="arrow-right" class='smallIcon'></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click="goPage('4',1)">
					<view class="lineContent dFlex jStart_aCenter">
						<view class="lineIcon imgPublic">
							<image src="../static/images/swhz@2x.png" mode="widthFix"></image>
						</view>
						<text>商务合作</text>
					</view>
					<u-icon name="arrow-right" class='smallIcon'></u-icon>
				</view>
				<view class="partLine dFlex jBetween_aCenter" @click='posterFlag = true'>
					<view class="lineContent dFlex jStart_aCenter">
						<view class="lineIcon imgPublic">
							<image src="../static/images/tg@2x.png" mode="widthFix"></image>
						</view>
						<text>推广</text>
					</view>
					<u-icon name="arrow-right" class='smallIcon'></u-icon>
				</view>
				<button open-type="contact" class="partLine dFlex jBetween_aCenter">
					<view class="lineContent dFlex jStart_aCenter">
						<view class="lineIcon imgPublic">
							<image src="../static/images/lxkf@2x.png" mode="widthFix"></image>
						</view>
						<text>联系客服</text>
					</view>
					<u-icon name="arrow-right" class='smallIcon'></u-icon>
				</button>
			</view>
		</view>
		<!-- 推广海报 -->
		<view class="zz dFlex jCenter_aCenter" v-if='posterFlag' @click='posterFlag = false'>
			<view class="poster">
				<view class="posterImg imgPublic">
					<image v-if='poster' :src="poster" mode="widthFix"></image>
					<image v-else src="../static/images/tghb@2x.png" mode="widthFix"></image>
				</view>
				<view class="closeBtn" @click.stop='saveImg'>保 存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		info,jscode2session,programLogin,getViperSetting,getPoster
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				posterFlag:false,
				poster:'',
				datas:{},
			};
		},
		onShow(){
			if(uni.getStorageSync('uToken')){
				this.initUser();
			}
		},
		onShareAppMessage() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onShareTimeline() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		methods:{
			// 用户信息
			async initUser(){
				let res = await info({});
				console.log(res);
				if(res){
					this.datas = res;
				}
				// 海报图 
				this.initSharePoster();
			},
			// 加载海报图
			async initSharePoster(){
				let res = await getPoster({});
				if(res){
					this.poster = res.poster;
				}
			},
			// 保存海报图
			saveImg(){
				uni.downloadFile({
					url:this.poster,
					success:(file)=>{
						if(file.statusCode == '200'){
							uni.saveImageToPhotosAlbum({
								filePath:file.tempFilePath,
								success: () => {
									uni.showToast({
										title:'图片已保存',
										icon:"success"
									})
									this.posterFlag = false;
								},
								fail:()=>{
									this.posterFlag = false;
									uni.showToast({
										title:'图片保存失败',
										icon:'error'
									})
								}
							})
						}
					},
					fail:(err)=>{
						console.log(err);
						uni.showToast({
							title:'图片下载失败',
							icon:'none'
						})
					}
				})
			},
			// 页面跳转
			goPage(idx,status){
				if(status){
					if(!uni.getStorageSync('uToken')){
						uni.showToast({
							title:'请先登录',
							icon:'none'
						})
						return;
					}
				};
				if(idx == '1'){ //收藏
					uni.navigateTo({
						url:'/person/collect'
					})
				}else if(idx == '2'){//钱包
					uni.navigateTo({
						url:'/person/wallet'
					})
				}else if(idx == '3'){//卡券
					uni.navigateTo({
						url:'/person/coupon'
					})
				}else if(idx == '4'){//商务合作
					uni.navigateTo({
						url:'/person/cooperate'
					})
				}else if(idx == '5'){//收货地址
					uni.navigateTo({
						url:'/person/address'
					})
				}else if(idx == '6'){//充值
					uni.navigateTo({
						url:'/person/recharge'
					})
				}else if(idx == '7'){
					uni.navigateTo({
						url:'/person/orders?status='+status,
					})
				}
			},
			// 微信登录
			wxLogin(e){
				wx.login({
					success:async (login)=>{
						let res = await jscode2session({
							code:login.code,
						});
						if(res){
							let res2 = await programLogin({
								encrypt: e.detail.encryptedData,
								iv: e.detail.iv,
								session_key: JSON.parse(res).session_key,
								openid: JSON.parse(res).openid,
								tjr_mobile:uni.getStorageSync('tjr_mobile')?uni.getStorageSync('tjr_mobile'):'',
								unionid:JSON.parse(res).unionid,
								source:'0',
							});
							if(res2){
								uni.setStorageSync('uToken',res2.userinfo.token);
								this.initUser();
							}
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.person{
		width:100%;
		.zz{
			.poster{
				width: 84.22%;
				.posterImg{
					width: 100%;
					margin-bottom:12px;
				}
				.closeBtn{
					width:55%;
					margin: 0 auto;
					text-align: center;
					color:white;
					background: #F4F4F4 linear-gradient(to right, #3E8EF0, #1362C9);
					border-radius: 50px;
					padding: 8px 0;
				}
			}
		}
		.part{
			width:94.8%;
			margin: 12px auto;
			background: white;
			border-radius: 4px;
			padding: 0 12px;
			box-sizing: border-box;
			.partList{
				width:100%;
				.partLine{
					width:100%;
					padding:12px 0;
					box-sizing: border-box;
					border-bottom: 1px solid #E6E6E6;
					.lineContent{
						flex: 1;
						font-size: 12px;
						.lineIcon{
							width: 18px;
							height: 18px;
							margin-right: 10px;
						}
					}
				}
				.partLine:last-child{
					border:none;
					margin-bottom: 8px;
				}
			}
			.partVal{
				width:100%;
				padding: 6px 0;
				font-size: 12px;
				.orderOne{
					flex:1;
					text-align: center;
					.orderIcon{
						width: 26px;
						height: 26px;
						margin:0 auto 4px;
					}
				}
			}
			.partTit{
				width:100%;
				font-weight: bold;
				padding:10px 0;
				.lookMore{
					width: max-content;
					font-size: 12px;
					color:#808080;
				}
			}
		}
		.user{
			width:100%;
			position: relative;
			.userContent{
				width:100%;
				height: 100%;
				position: absolute;
				top: 0;
				left:0;
				padding-top: 17.55%;
				box-sizing: border-box;
				.config{
					width:100%;
					padding:0 12px;
					box-sizing: border-box;
					position: relative;
					.configContent{
						width:93.5%;
						height: 100%;
						position: absolute;
						top:0;
						left:3.25%;
						.tool{
							width:100%;
							height: 50%;
							padding-bottom: 6px;
							box-sizing: border-box;
							.toolOne{
								flex:1;
								color:#3D2A1B;
								text-align: center;
								.toolIcon{
									width:26px;
									height: 26px;
									margin-right: 5px;
								}
							}
						}
						.vip{
							width:100%;
							height: 50%;
							padding:0 12px;
							box-sizing: border-box;
							.vipDesc{
								flex:1;
								color:#3D2A1B;
								.vipIcon{
									width:28px;
									height: 28px;
									margin-right: 10px;
								}
							}
							.vipTime{
								font-size: 12px;
								color:#808080;
							}
						}
					}
				}
				.base{
					width:100%;
					padding:0 20px;
					box-sizing: border-box;
					color:white;
					margin-bottom: 15px;
					.tx{
						width: 60px;
						height: 60px;
						border-radius: 50%;
						overflow:hidden;
						margin-right: 12px;
					}
				}
			}
		}
	}
</style>
